<template>
  <div 
    ref="chartRef" 
    :class="className" 
    :style="{ width, height }"
  />
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, nextTick, defineProps, defineEmits, expose } from 'vue';
import * as echarts from 'echarts';

// 定义 props
const props = defineProps({
  // 图表配置项
  options: {
    type: Object,
    required: true
  },
  // 图表宽度
  width: {
    type: String,
    default: '100%'
  },
  // 图表高度
  height: {
    type: String,
    default: '400px'
  },
  // 自定义类名
  className: {
    type: String,
    default: ''
  },
  // 是否自动响应容器大小变化
  autoResize: {
    type: Boolean,
    default: true
  }
});

// 定义事件
const emit = defineEmits(['chart-click', 'chart-ready']);

// 图表实例和DOM引用
const chartRef = ref(null);
let chartInstance = null;

// 初始化图表
const initChart = () => {
  // 确保DOM已挂载
  if (!chartRef.value) return;

  // 销毁已有实例（避免重复初始化）
  if (chartInstance) {
    echarts.dispose(chartInstance);
  }

  // 创建实例
  chartInstance = echarts.init(chartRef.value);
  
  // 设置配置项
  chartInstance.setOption(props.options);
  
  // 触发就绪事件
  emit('chart-ready', chartInstance);

  // 绑定点击事件
  chartInstance.on('click', (params) => {
    emit('chart-click', params);
  });
};

// 更新图表配置
const updateChart = (options) => {
  if (chartInstance && options) {
    chartInstance.setOption(options);
  }
};

// 处理窗口大小变化
const handleResize = () => {
  chartInstance?.resize();
};

// 监听配置项变化
watch(
  () => props.options,
  (newVal) => {
    // 等待DOM更新后再更新图表
    nextTick(() => {
      updateChart(newVal);
    });
  },
  { deep: true } // 深度监听对象内部变化
);

// 生命周期钩子
onMounted(() => {
  nextTick(initChart);
  if (props.autoResize) {
    window.addEventListener('resize', handleResize);
  }
});


onUnmounted(() => {
  if (chartInstance) {
    echarts.dispose(chartInstance);
    chartInstance = null;
  }
  if (props.autoResize) {
    window.removeEventListener('resize', handleResize);
  }
});

// 暴露方法给父组件
expose({
  updateChart, // 手动更新图表
  getInstance: () => chartInstance, // 获取图表实例
  resize: handleResize // 手动触发 resize
});
</script>

<style scoped>
/* 基础样式 */
:deep(.ec-plot) {
  width: 100%;
  height: 100%;
}
</style>